<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
        <style>
            .menu {
                display: flex;
                height: 50px;
                background-color: aquamarine;
                line-height: 50px;
            }

            .menu .item {
                flex: auto;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="menu">
                <div class="item" v-for="item in list" :class="{active:item.id==activeIndex}" @click="change(item)">
                    {{item.msg}}
                </div>
            </div>
            <div class="box">
                <component :is="com"></component>
            </div>
        </div>

    </body>
    <template id="com1">
        <div>
            组件一
        </div>
    </template>
    <template id="com2">
        <div>
            组件二
        </div>
    </template>
    <template id="com3">
        <div>
            组件三
        </div>
    </template>

    <script>
        let com1 = {
            template: "#com1"
        }
        let com2 = {
            template: "#com2"
        }

        let com3 = {
            template: "#com3"
        }




        new Vue({
            el: "#app",
            data: {
                com: "",
                activeIndex: "",
                list: [{ id: 1, msg: "菜单一", com: "com1" }, { id: 2, msg: "菜单二", com: "com2" }, { id: 3, msg: "菜单三", com: "com3" }]
            },
            methods: {
                change(item) {
                    // console.log(item);
                    // console.log(item.id);
                    this.activeIndex = item.id;
                    this.com = item.com;
                },

                beforeCreat() {
                    console.log("父组件创建之前");
                },
                created() {
                    console.log("父组件已创建");
                },
                beforeMount() {
                    console.log("父组件加载之前");
                },
                mounted() {
                    console.log("父组件加载完毕");
                },
                beforeUpdate() {
                    console.log("父组件更新之前");
                },
                updated() {
                    console.log("父组件已更新");
                },
                beforeDestory() {
                    console.log("父组件销毁之前");
                },
                destoryed() {
                    console.log("父组件已销毁");
                }

            },
            components: {
                com1,
                com2,
                com3
            }
        })


    </script>

    </html>
</body>
<script>




</script>

</html>